<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>小组管理</title>
    <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
    <style>
        #tbody_{
            position: absolute;
            left: 50px;
        }
        /* 基本重置与全局样式 */
        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            margin: 0;
            padding: 0;
            background-color: #f4f4f4;
        }

        h2 {
            margin-top: 0;
            color: #333;
        }

        button {
            cursor: pointer;
            padding: 8px 16px;
            background-color: #007BFF;
            color: white;
            border: none;
            border-radius: 4px;
            margin-right: 10px;
        }

        button:hover {
            background-color: #0056b3;
        }

        input[type="text"], select {
            padding: 6px 12px;
            margin: 5px 0;
            width: 200px;
            box-sizing: border-box;
            border: 1px solid #ccc;
            border-radius: 4px;
        }

        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
        }

        th, td {
            text-align: left;
            padding: 8px;
            border: 1px solid #ddd;
        }

        th {
            background-color: #f2f2f2;
            font-weight: bold;
        }

        tr:nth-child(even) {
            background-color: #f2f2f2;
        }

        a {
            color: #007BFF;
            text-decoration: none;
        }

        a:hover {
            text-decoration: underline;
        }

        /* 新增框样式 */
        #update {
            position: relative;
            background-color: white;
            padding: 20px;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
            width: 30%;
            margin: 20px auto;
        }

        #update input[type="text"] {
            width: 100%;
            margin-bottom: 10px;
        }

        #update button {
            width: 100%;
            margin-top: 10px;
        }

        /* 展开/收回按钮样式 */
        td:last-child a {
            color: inherit;
        }
    </style>
</head>
<body>
<%--//新增和查询--%><button id="newAdd">新增成员</button><input type="text" id="selectSquad" value="1"><input type="button" value="查询" id="searchSquad">
<%--//新增框--%>
<div>
    <div id="update" style="display: none">
        <h2>添加品牌</h2>
        <div id="idOk"></div>
        昵称<input type="text" id="userName" required>
        性别<input type="text" id="sex" required>
        年龄<input type="text" id="age" required>
        小组<select id="petStatus1">
            </select>
        <button id="updateOk">确认新增</button>
        <button id="cancel1">取消</button>
    </div>
</div>
<table>
    <tr>
        <th>编号</th>
        <th>小组名称</th>
        <th>成员数量</th>
        <th>积分</th>
        <th>口号</th>
        <th>操作</th>
    </tr>
    <tbody id="newSquad"></tbody>
</table>
<script>
    $(function () {
        selectSquad();
    });
    var isCollapsed = {}; // 记录每个小组展开状态
    function selectSquad(selectSquad1) {
        $("#newSquad").empty();
        $.ajax({

            url:'squadUserServlet',
            dataType:'json',
            type:'post',
            data:{opr:'selectSquad', name:selectSquad1},
            success:function (data){
                console.log(data)
                for(var i = 0; i < data.length; i++) {
                    var str = "<tr id='tr_"+data[i].squadId+"'>";
                    str += "<td>" + data[i].squadId + "</td>";
                    str += "<td>" + data[i].name + "</td>";
                    str += "<td>" + data[i].num + "</td>";
                    str += "<td>" + data[i].integral + "</td>";
                    str += "<td>" + data[i].slogan + "</td>";
                    str += "<td><a href='#' onclick='showUser(\"" + data[i].squadId + "\")'>展开</a></td>";
                    str += "</tr>";

                    $("#newSquad").append(str);

                    var strOk = "<option value='" + (i+1) + "'>" + data[i].name + "</option>";
                    $("#petStatus1").append(strOk);
                    // 初始化每个小组的div，但不显示
                    var userDivStr = "<tr style='display:none;' id='userDiv_" + data[i].squadId + "'>";
                    userDivStr += "<td colspan='6'>";
                    userDivStr += "<table>";
                    userDivStr += "<tbody id='tbody_" + data[i].squadId + "'>";
                    userDivStr += "</tbody>";
                    userDivStr += "</table>";
                    userDivStr += "</td>";
                    userDivStr += "</tr>";

                    $("#newSquad").append(userDivStr);
                }
            },
            error:function (){}
        });
    }

    function showUser(id) {
        var divId = "#userDiv_" + id;
        var btnId = "#" + id; // 按钮id

        isCollapsed[id] = !isCollapsed[id]; // 切换状态
        $(divId).toggle(isCollapsed[id] ? "hide" : "show"); // 显示或隐藏
        $(btnId).html(isCollapsed[id] ? "展开" : "收回"); // 改变按钮文本
        if (!isCollapsed[id]) {
            selectUser(id); // 展开时获取数据
        }
    }

    function selectUser(id) {
        $.ajax({
            url:'squadUserServlet',
            dataType:'json',
            type:'post',
            data:{opr:'selectUser', id:id},
            success:function (userData){
                var tbodyId = "#tbody_" + id;
                $(tbodyId).empty(); // 清空之前内容
                var userStr = "<tr>";
                userStr += "<td>人员编号</td>";
                userStr += "<td>昵称</td>";
                userStr += "<td>性别</td>";
                userStr += "<td>年龄</td>";
                userStr += "<td>操作</td>";
                userStr += "</tr>";
                $(tbodyId).append(userStr);
                for(var j = 0; j < userData.length; j++) {
                    var userStr = "<tr>";
                    userStr += "<td>" + userData[j].userId + "</td>";
                    userStr += "<td>" + userData[j].nickName + "</td>";
                    userStr += "<td>" + (userData[j].gender == '1' ? '男' : '女') + "</td>";
                    userStr += "<td>" + userData[j].age + "</td>";
                    userStr += "<td><a href='#' onclick='deleteUser(\"" + userData[j].userId + "\")'>删除</a></td>";
                    userStr += "</tr>";
                    $(tbodyId).append(userStr);
                }
            },
            error:function (){

            }
        });
    }

    function deleteUser(id) {
        alert(id)
        $.ajax({
            url:'squadUserServlet',
            dataType:'json',
            type:'post',
            data:{opr:'delete', id:id},
            success:function (data){
                if(data==1){
                    alert("删除成功！")
                    selectSquad();
                }
            },
            error:function (){

            }
        });
    }

    $('#searchSquad').on('click', function() {
        let selectSquad1 = $('#selectSquad').val();
        selectSquad(selectSquad1);
    })





    $('#newAdd').on('click',function () {
        $('#update').show();

    })
    $('#cancel').on('click',function () {
        $('#update').hide();
    })
    $('#cancel1').on('click',function () {
        $('#update').hide();
    })
    $('#updateOk').on('click',function () {
        var sex = $('#sex').val();
        if(sex == '男'){
            sex = '1'
            addFindOk(sex);
        }else if (sex == '女'){
            sex = '0'
            addFindOk(sex);
        }else {
            alert('请输入正确的性别！')
        }

    })

    function addFindOk(sex) {
        var userName = $('#userName').val();
        var age = $('#age').val();
        var selectedStatus = $("#petStatus1").val(); // 直接获取下拉框的选中值，修正选择器
        $.ajax({
            url:'squadUserServlet',
            type:'post',
            dataType:'json',
            data:{
                opr:'add',
                userName:userName,
                sex:sex,
                age:age,
                status:selectedStatus
            },
            success:function (data){
                if(data==1){
                    alert('新增成功')
                    window.location.reload()
                }
            },
            error:function (data){

            }
        })
    }
</script>
</body>
</html>
